<template>
  <div>
    <div class="header" v-if="$slots.title">
      <slot name="title"></slot>
    </div>

    <div class="subject" v-for="(item, index) in arr" :key="index">
      <slot name="main">
        <span>{{ item.num1 }}</span>
        <span>+</span>
        <span>{{ item.num2 }}</span>
        <span>=</span>
        <input type="number" v-model="item.result" />
        <button @click.prevent="sum(index)" :disabled="item.submitted">
          提交
        </button>
      </slot>
    </div>
    <br />
    <div>
        <span
          v-for="(item, id) in arr"
          :key="id"
          :class="{
            right: item.status === '正确',
            error: item.status === '错误',
            undo: item.status === '未完成',
          }"
          >{{ id + 1 }}: {{ item.status }}</span
        >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    arr: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    sum(index) {
      console.log(index)
      if (this.arr[index].result == '') {
        return
      }

      if (
        this.arr[index].result ==
        this.arr[index].num1 + this.arr[index].num2
      ) {
        this.arr[index].status = '正确'

        this.arr[index].submitted = true
      } else {
        this.arr[index].status = '错误'
      }
    },
  },
}
</script>

<style>
.subject {
  margin: 5px;

  padding: 5px;

  font-size: 20px;
}

.subject > span {
  display: inline-block;

  text-align: center;

  width: 20px;
}

.subject input {
  width: 50px;

  height: 20px;
}

.right {
  color: green;
}

.error {
  color: red;
}

.undo {
  color: #ccc;
}

body {
  background-color: #eee;
}

#app {
  background-color: #fff;

  width: 500px;

  margin: 50px auto;

  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);

  padding: 2em;
}
</style>
